<script setup lang="ts" name="DevelopUpload">
const imageUrl1 = ref('')
const imageUrl2 = ref('')
const imageUrl3 = ref('')
const sourceUrl1 = ref('')
const sourceUrl2 = ref('')
const sourceUrl3 = ref('')
const sourceUrl4 = ref('')
const sourceUrl5 = ref('')
</script>

<template>
  <PageScroll>
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span>图片上传组件（图片上传裁剪，可上传多个图片）</span>
        </div>
      </template>
      <UploadImage v-model="imageUrl1" mimetype="image" />
    </el-card>
    <el-card class="mt-20px" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>图片上传组件（图片上传裁剪，只能上传一个图片）</span>
        </div>
      </template>
      <UploadImage v-model="imageUrl2" mimetype="image" :limit="1" />
    </el-card>
    <el-card class="mt-20px" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>图片上传组件（通过资源库选择图片，可选择多个图片）</span>
        </div>
      </template>
      <UploadImage v-model="imageUrl3" mimetype="image" type="picker" />
    </el-card>
    <el-card class="mt-20px" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>通用上传组件（支持上传多个文件）</span>
        </div>
      </template>
      <UploadSource v-model="sourceUrl1" />
    </el-card>
    <el-card class="mt-20px" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>通用上传组件（限制上传1个文件）</span>
        </div>
      </template>
      <UploadSource v-model="sourceUrl2" :limit="1" />
    </el-card>
    <el-card class="mt-20px" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>通用上传组件（上传指定mimetype类型文件，资源配置中配置指定mimetype支持的后缀）</span>
        </div>
      </template>
      <UploadSource v-model="sourceUrl3" mimetype="image" :limit="1" />
    </el-card>
    <el-card class="mt-20px" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>通用上传组件（仅支持指定后缀文件上传）</span>
        </div>
      </template>
      <UploadSource v-model="sourceUrl4" accept=".xlsx" :limit="1" />
    </el-card>
    <el-card class="mt-20px" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>通用上传组件（通过资源库选择文件，支持选择多个文件）</span>
        </div>
      </template>
      <UploadSource v-model="sourceUrl5" type="picker" />
    </el-card>
  </PageScroll>
</template>

<style scoped lang="scss"></style>
